<template>
  <!-- <div class="Administration"> -->
  <div class="user-maneger">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <span @click="outerVisible = true">用户管理</span>
      <img src="../assets/nav-img/yonghu.svg" alt="" />
      <el-dialog title="用户信息" :visible.sync="outerVisible">
        <!-- <el-card class="user-container"> -->
        <el-row>
          <el-col :span="8">
            <!-- ADD -->
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-circle-plus"
              @click="handleAdd"
              >添加</el-button
            >
          </el-col>
          <el-col :span="8" :offset="8">
            <el-input
              size="small"
              placeholder="请输入搜索关键字"
              prefix-icon="el-icon-search"
            ></el-input>
            <el-button type="primary" size="mini">搜索</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table border :data="users" stripe>
          <el-table-column
            prop="user_name"
            label="用户名"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="user_type"
            label="用户类型"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="user_onlinestatus"
            label="登录状态"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="1" label="操作" align="center">
            <!-- 使用作用域插槽。将父组件中定义的数据传递给子组件的模板 -->
            <template v-slot="users">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(users.row.user_id)"
              >
                <i class="el-icon-edit"></i>编辑
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="deleteBtn(users.row.user_id)"
              >
                <i class="el-icon-delete"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 5, 10, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <el-dialog
          :title="isEdit ? '修改用户' : '添加用户'"
          :visible.sync="dialogVisible"
          width="40%"
        >
          <el-form ref="userForm" :model="userForm">
            <el-form-item label="用户账号" prop="user_name" :label-width="100">
              <el-input
                v-model="userForm.user_name"
                placeholder="请输入用户账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="修改角色" :label-width="100">
              <el-select
                v-model="userForm.user_type"
                placeholder="请选择角色类型"
              >
                <el-option label="admin" value="admin"></el-option>
                <el-option label="traffic" value="traffic"></el-option>
                <el-option label="user" value="user"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-dialog>

      <!------------删除-------------->
    </el-menu>
  </div>
  <!-- </div> -->
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      users: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      page: 1, // 当前的页码数
      size: 10, // 每页显示记录数
      total: 0, // 记录总数
      dialogVisible: false,
      userForm: {
        user_name: '',
        user_type: '',
      },
      form: {
        region: '',
      },
      isEdit: false, //true：修改状态
      outerVisible: false,
      innerVisible: false,
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      // GET
      this.$http.get('http://localhost:8080/user').then((res) => {
        console.log('userDate', res);
        // 1. 更新total
        this.total = res.result.total;
        // 2. 更新users数组
        this.users = res.result.data;
        console.log('=======', this.users);
      });
    },
    handleSizeChange(val) {
      // 改变每页显示记录数
      this.size = val;
      this.getUsers();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getUsers();
    },
    handleAdd() {
      this.isEdit = false;
      //跳转页面
      //this.$router.push('/user/add');
      /* 显示一个对话框 */
      this.dialogVisible = true;
    },
    handleDelete() {
      this.deleteEdit = false;
      // //跳转页面
      // //this.$router.push('/user/add');
      // /* 显示一个对话框 */
      this.deleteVisible = true;
    },
    handleEdit(user_id) {
      // 更新isEdit状态
      this.isEdit = true;
      // 显示对话框
      this.dialogVisible = true;
      console.log(user_id);
      // 调用接口, 获取数据
      this.$http.get(`/user/${user_id}`).then((res) => {
        console.log('res', res);
        console.log('id', res.result.user_id);

        // 根据返回的数据, 更新form状态
        this.userForm = res.result.data;
        console.log('22222', this.userForm);
        console.log('33333', typeof userForm);
      });
    },
    deleteBtn(user_id) {
      // 更新isEdit状态
      //this.isEdit = true;
      // 显示对话框
      // this.dialogVisible = true;
      console.log(user_id);
      // 调用接口, 获取数据
      this.$http.delete(`/user/${user_id}`).then((res) => {
        console.log(res);
        console.log(res.result.id);

        // 根据返回的数据, 更新form状态
        this.userForm = res.result;
        this.getUsers();
      });
    },
    onSubmit() {
      // 通过ref获取组件对象
      this.$refs['userForm'].validate((valid) => {
        // 表单验证通过
        if (valid) {
          if (this.isEdit) {
            // isEdit==true: 修改状态
            // 发送 PUT 请求
            this.editUser();
          } else {
            // isEdit==false: 添加状态
            // 发送 POST 请求
            // 发送ajax请求
            this.addUser();
          }
        }
      });
    },
    async editUser() {
      const { code, message } = await this.$http.put(
        '/user/edit/' + this.userForm.user_id,
        this.userForm
      );

      if (code != 0) {
        // 提示
        this.$message.error(message);
        return;
      }

      this.$message({
        type: 'success',
        message: message,
        showClose: true,
        duration: 1000,
      });
      // 1. 关闭对话框
      this.dialogVisible = false;
      // 2. 重新获取数据
      this.getUsers();

      // 3. 清空表单
      this.$refs['userForm'].resetFields();
    },
    async addUser() {
      const res = await this.$http.post('/user', this.userForm);

      console.log('adduser', res);
      // 1. 关闭对话框
      this.dialogVisible = false;
      // 2. 重新获取数据
      this.getUsers();

      // 3. 清空表单
      this.$refs['userForm'].resetFields();
    },
  },
};
</script>
<style scoped>
/* .Administration {
  position: absolute;
  display: flex;
  top: 15px;
  right: 3px;
  width: 400px;
  height: 45px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
} */
/* -----------------------
        用户管理
------------------------ */
.user-maneger {
  position: absolute;
  top: 5px;
  left: -145px;
  width: 110px;
  height: 35px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.user-maneger:hover {
  background-color: #dbdbdb;
  color: white;
}
.user-maneger img {
  margin-top: 3px;
  margin-left: 76px;
}
.user-maneger span {
  position: absolute;
  top: 5px;
  left: 9px;
  font-weight: 700;
  color: #7c8196;
}
.user-maneger span:hover {
  color: white;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  padding-right: 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 80px;
  margin-top: 0px;
}
.el-input__inner {
  width: 2000px;
  border-radius: 50px;
  padding: 0 48px;
  font-size: 17px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  margin-top: 0px;
  background: #fff;
  border-radius: 16px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  z-index: 10000;
}
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  margin-top: 0px;
  background: #fff;
  border-radius: 13px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.el-table .cell .el-button--mini {
  font-size: 10px;
  border-radius: 3px;
}
::v-deep .el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 0px;
  padding-right: 10px;
}
.user-container {
  margin-top: 20px;
  min-width: 800px;
  /* height: 400px; */
}
.el-input {
  width: 70%;
  margin-right: 10px;
}
.el-row {
  margin-bottom: 20px;
}
::v-deep .el-form-item__label {
  text-align: left;
  color: black;
}
::v-deep .el-input__inner {
  margin-right: 10px;
}
.el-range-editor.is-active,
.el-range-editor.is-active,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ffb56f;
}
</style>
